<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="details-check-top">
            <h3>查看明细</h3>
            <el-row :gutter="41">
                <el-col :span="8">
                    <span>当前订单：</span>
                    <span>{{topData.orderNum}}</span>              
                </el-col>
                <el-col :span="8">              
                    <span>订单属性：</span>
                    <span>{{topData.serviceName}}</span>                
                </el-col>
                <el-col :span="8">              
                    <span>卡券数量：</span>
                    <span>{{topData.cardCouponsNum}}</span>                
                </el-col>
            </el-row>
            <el-row :gutter="41">
                <el-col :span="8">
                    <span>经销商名称：</span>
                    <span>{{topData.orgUserName}}</span>              
                </el-col>
                <el-col :span="8">              
                    <span>对应学校：</span>
                    <span>{{topData.schoolName}}</span>                
                </el-col>
                <el-col :span="8">              
                    <span>发放时间：</span>
                    <span>{{topData.openTime | dateFilter2}}</span>                
                </el-col>
            </el-row>
        </div>
        <div class="details-check-con">
            <el-table :data="tableList" border v-loading="loading" style="width: 100%">
                <el-table-column label="卡券类型" align="center">
                    <template scope="scope">
                        <span>{{scope.row.cardType | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="卡券名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.serviceName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="卡券码" align="center">
                    <template scope="scope">
                        <span>{{scope.row.fCardCoupons | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="卡券面值（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCardMoney | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="使用状态" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sStatus | statusFilter}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="使用人" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sUsername | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="班级" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sClassname | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="使用时间" align="center" width="170">
                    <template scope="scope">
                        <span>{{ scope.row.sUseTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="开通时长" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sUsefulLife  | isNull}}个月</span>
                    </template>
                </el-table-column> 
            </el-table>

            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../layout/Levelbar';
    import {getIncrementCardCouponsById, pageCardCouponsDetail} from 'api/cardCoupons';
    import { mapState, mapActions } from 'vuex';
    export default {
        name: 'cardDetailsCheck',
        components: {Levelbar},
        data() {
            return {
                loading: true,
                topData: {
                    orderNum: '',
                    serviceName: '',
                    cardCouponsNum: '',
                    orgUserName: '',
                    schoolName: '',
                    openTime: ''
                },
                tableList: [],
                pageQuery: {
                    page: 1,
                    total: 0
                }
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.queryData();
            this.getCardCoupons();
        },
        filters: {
            dateFilter(val) {
                if (val) {
                    return val.substring(0, 19)
                } else {
                    return '--'
                }               
            },
            dateFilter2(val) {
                if (val) {
                    return val.substring(0, 10)
                } else {
                    return '--'
                }               
            },
            statusFilter(val) {
                // if (val=='0') return '申请中';
                // if (val=='1') return '审核通过';
                // if (val=='2') return '审核拒绝';
                if (val == '0') return '未使用';
                if (val == '1') return '已使用';
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.page = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.page = val;
                this.queryData();
            },
            getCardCoupons() {
                getIncrementCardCouponsById(this.$route.params.id).then(response => {
                    let data = response.data.content;
                    this.topData.orderNum = data.sOrderNum;
                    this.topData.serviceName = data.sServiceName;
                    this.topData.cardCouponsNum = data.sCardCouponsNum;
                    this.topData.orgUserName = data.fOrgUserName;
                    this.topData.schoolName = data.sSchoolName;
                    this.topData.openTime = data.sOpenTime;
                });
            },
            queryData() {
                this.tableList = [];
                this.loading = true;
                pageCardCouponsDetail(this.$route.params.id, this.pageQuery.page, this.config.pageSize).then(response => {
                    this.tableList = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                    this.tableList.map(item => {
                        item.serviceName = this.$route.params.serviceName;
                        item.cardType = this.$route.params.cardType=='0'?'通用券':'学校专用券';
                    });
                    this.loading = false;
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        $borderColor:#ebebeb;
        @mixin title3{
            line-height: 40px;
            font-weight: normal;
            font-size:14px;
            text-indent: 20px;
        }
        .app-levelbar {
            height: 35px;
        }
        .details-check-top{
            border:1px solid $borderColor;
            background: $bgcolor;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            h3{
                @include title3;
                border-bottom: 1px solid $borderColor;              
            }
            .el-row{
                padding: 20px 0;
                font-size: 14px;
               
                .el-col{
                    color:#333;
                    line-height: 32px;
                    border-right: 1px solid $borderColor;
                    display: flex;
                    span{
                        display: inline-block; 
                        flex:1;                     
                        &:nth-child(1){
                            text-align: right;
                        }
                    }
                    &:last-child{
                        border-right:0 ;
                    }
                }
            }
        }

        .details-check-con{
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            padding: 26px 20px 0;
            background: $bgcolor;
            .pagination-container {
                text-align: right;
                padding-right: 20px;
            }
        }
    }
</style>